<template>
    <div class="app-container">
        <el-card class="box-card" style="height: 260px; margin-bottom: 30px">
            <div class="title">欢迎来到{{ app_title }}</div>
        </el-card>
        <avue-data-price :option="option"></avue-data-price>
    </div>
</template>

<script>
import { list as archivesList } from '@/api/archives/archives'
import { list as noticeList } from '@/api/archives/notice'
import { MODULE_DICTID, MODULE_ID } from '@/const/modules'
export default {
    name: 'Server',
    data() {
        return {
            option: {
                data: [
                    {
                        title: '案卷统计',
                        price: null,
                        // append: '1 / 天',
                        click: () => {
                            this.$router.push({
                                path: '/Marchives/archives'
                            })
                        },
                        list: [
                            '档案名称',
                            '程序类型',
                            '起火天气',
                            '起火地点'
                        ]
                    },
                    {
                        title: '询问统计',
                        price: null,
                        // append: '1 / 天',
                        click: () => {
                            this.$router.push({
                                path: '/Marchives/record',
                                query: {
                                    dictId: 2
                                }
                            })
                        },
                        list: [
                            '询问时间',
                            '询问地点',
                            '被询问人',
                            '询问笔录'
                        ]
                    },
                    {
                        title: '提取统计',
                        price: null,
                        // append: '1 / 天',
                        click: () => {
                            this.$router.push({
                                path: '/Marchives/collect',
                                query: {
                                    dictId: 3
                                }
                            })
                        },
                        list: ['提取人', '提取物', '证人', '当事人']
                    },
                    {
                        title: '照片统计',
                        price: null,
                        // append: '1 / 天',
                        click: () => {
                            this.$router.push({
                                path: '/Marchives/photo',
                                query: {
                                    dictId: 12
                                }
                            })
                        },
                        list: ['拍摄时间', '拍摄方向', '制作时间', '录音']
                    }
                ]
            }
        }
    },
    computed: {
        app_title() {
            return process.env.VUE_APP_TITLE
        },
        currentModule() {
            return (currentDictId) => {
                const currentModule = Object.entries(MODULE_DICTID).find(([key, value]) => value == currentDictId);
                const [moduleName,] = currentModule;
                const moduleId = MODULE_ID[currentDictId]
                return { moduleName, moduleId }
            }
        }
    },
    created() {
        this.getArchivesList()
        this.getNoticeList(MODULE_DICTID.note)
        this.getNoticeList(MODULE_DICTID.extract)
        this.getNoticeList(MODULE_DICTID.photo)
    },
    methods: {
        getArchivesList() {
            archivesList({ pageNum: 1, pageSize: 10 }).then(res => {
                // console.log(res)
                this.option.data[0].price = res.total
            })
        },
        getNoticeList(dictId) {
            /*
            key : dictId
            value: option.data 的 下标
            */
            const { moduleName, moduleId } = this.currentModule(dictId)
            const dictObj = {
                2: 1,
                3: 2,
                12: 3
            }
            noticeList({ moduleName, pageNum: 1, pageSize: 999, dictId, }).then(res => {
                let list = []
                res.rows.forEach(item => {
                    list.push(...item[moduleName + 'List'])
                })
                this.option.data[dictObj[dictId]].price = list.length
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    &::before {
        content: "";
        position: absolute;
        top: 185px;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../assets/images/home.png);
        background-color: rgba(255, 255, 255, 0.5);
        /* 设置背景颜色为白色并设置透明度为 0.5 */
        opacity: 0.1;
    }
}

.box-card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    box-shadow: 2px 3px 15px #eee;
}

.title {
    font-size: 26px;
    font-weight: bold;
    padding: 20px 0;
    color: #001e9e;
    font-size: 36px;
    // position: absolute;
    // bottom: 79%;
    z-index: 10;
    text-align: center;
}

::v-deep .data-price {
    & .el-col:not(.el-col:nth-child(4n-3)):not(.el-col:nth-child(4n)) {
        .item {
            margin: 0 20px;
        }
    }

    & .item {
        margin: 0;

        .body {
            &::before {
                display: none;
            }
        }

        .list {
            p {
                margin: 14px 0;
            }
        }
    }
}

.bg {
    position: absolute;
    top: 185px;
    left: 0;
    display: flex;
    justify-content: flex-end;
    opacity: 0.1;
}

img {
    // max-width: 90%;
    max-height: 100vh;
    width: 100%;
}
</style>
